<template>
	<view class="detail-container">
		<!-- 商品图片轮播 -->
		<swiper class="image-swiper" indicator-dots="true" autoplay="false" interval="3000" duration="500">
			<swiper-item v-for="(item, index) in detail.imgs" :key="index">
				<image :src="item" class="swiper-image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="price-section">
				<text class="price">{{detail.originprice}}</text>
			</view>
			<text class="title">{{detail.proname}}</text>
			<text class="sub-title">{{detail.subtitle || '品质保证，放心购买'}}</text>
			<view class="sales-info">
				<text>销量 {{detail.sales || 0}}件</text>
				<text>库存 {{detail.stock || 0}}件</text>
			</view>
		</view>

		<!-- 商品详情分隔线 -->
		<view class="separator"></view>

		<!-- 商品详情描述 -->
		<view class="product-detail">
			<view class="section-title">商品详情</view>
			<rich-text :nodes="detail.desc" class="detail-content"></rich-text>
		</view>

		

		<view v-for="(item, index) in detail.imgs" :key="index" class="detail-img">
			<image :src="item"  mode="aspectFill"></image>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="cart-btn" @click="addToCart">
				<text>加入购物车</text>
			</view>
			<view class="buy-now-btn" @click="buyNow">
				<text>立即购买</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{},
				proid:''
			}
		},
		methods: {
			// 获取商品详情
			getDetail(){
				uni.request({
					url:'http://47.94.6.186:3001/api/pro/detail/'+this.proid,
					method:'GET',
					success:(res)=>{
						console.log(res.data)
						this.detail = res.data.data
					}
				})
			},
			// 添加到购物车
			addToCart(){
				// 这里可以添加到购物车的逻辑
				uni.request({
					url:'http://47.94.6.186:3001/api/cart/add',
					method:'post',
					header:{
						token:uni.getStorageSync('token')
					},
					data:{
						userid:uni.getStorageSync('userid'),
						proid:this.proid,
						num:1
					},
					success:(res)=>{
						console.log(res)
						if(res.data.code==200){
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
						}else{
							uni.showToast({
								title: '添加失败',
								icon: 'none'
							})
						}
					}
				})
			},
			// 立即购买
			buyNow(){
				// 这里可以添加立即购买的逻辑
				uni.showToast({
					title: '跳转至订单确认页',
					icon: 'none'
				})
			}
		},
		onLoad(options) {
			console.log(options.proid)
			this.proid = options.proid
			this.getDetail()
		}
	}
</script>

<style>
/* 商品详情页样式 */
.detail-container {
  position: relative;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部操作栏留出空间 */
}

/* 商品图片轮播 */
.image-swiper {
  width: 100%;
  height: 600rpx;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

.swiper-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.image-swiper swiper-item:active .swiper-image {
  transform: scale(1.02);
}

/* 商品基本信息 */
.product-info {
  padding: 30rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 0 0 20rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

.price-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.price {
  font-size: 48rpx;
  font-weight: bold;
  color: #e64340;
  margin-right: 20rpx;
  position: relative;
}

.price::before {
  content: '¥';
  font-size: 36rpx;
  margin-right: 4rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999999;
  text-decoration: line-through;
  position: relative;
}

.original-price::before {
  content: '¥';
  font-size: 24rpx;
  margin-right: 4rpx;
}

.title {
  display: block;
  font-size: 36rpx;
  color: #333333;
  margin-bottom: 20rpx;
  line-height: 1.5;
  font-weight: 500;
}

.sub-title {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.sales-info {
  display: flex;
  font-size: 26rpx;
  color: #999999;
  background-color: #f9f9f9;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
}

.sales-info text {
  margin-right: 30rpx;
}

.sales-info text::before {
  content: '•';
  margin-right: 8rpx;
}

/* 分隔线 */
.separator {
  height: 20rpx;
  background-color: #f5f5f5;
}

/* 商品详情描述 */
.product-detail,
.product-specs {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding-bottom: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 30rpx;
  top: 50%;
  width: 12rpx;
  height: 24rpx;
  background-color: #e64340;
  transform: translateY(-50%);
  border-radius: 6rpx;
  margin-left: -20rpx;
}

.detail-content {
  padding: 30rpx;
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
}

.detail-content image {
  width: 100%;
  margin: 20rpx 0;
  border-radius: 12rpx;
  overflow: hidden;
}



/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 100;
  border-top: 2rpx solid #f0f0f0;
}

.cart-btn {
  width: 180rpx;
  height: 80rpx;
  background-color: #FBAB07;
  color: #ffffff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(251, 171, 7, 0.3);
  transition: all 0.3s ease;
}

.cart-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 6rpx rgba(251, 171, 7, 0.2);
}

.buy-now-btn {
  width: 180rpx;
  height: 80rpx;
  background-color: #F6390D;
  color: #ffffff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(246, 57, 13, 0.3);
  transition: all 0.3s ease;
}

.buy-now-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 6rpx rgba(246, 57, 13, 0.2);
}

/* 详情图片样式优化 */
.detail-img {
  width: 100%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}

.detail-img:active {
  transform: scale(0.98);
}

.detail-img image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

/* 响应式调整 */
	@media screen and (min-width: 768px) {
		.detail-container {
			max-width: 768rpx;
			margin: 0 auto;
		}
	}

</style>
